<template>
  <div class="person">
    <ul>
      <li v-for="p in list">
        {{ p.name }} -- {{ p.age }}
      </li>
    </ul>
    <hr>
    <h2>{{ Yenan }}</h2>
  </div>
</template>
<script lang="ts" setup>
// defineProps 用于接受父组件传递过来的数据
import {defineProps} from 'vue'
import {type PersonList } from "@/type";
//一、 最简单的接收：
// defineProps(['list'])  //但是这种情况只知道接受了一个数据，但是不知道是方法还是变量等

//二、 通过使用变量将props保存
// let x = defineProps(['list'])  //defineProps是有返回值的
// console.log('看看defineProps的返回值',x);

// 三、接收 + 限制
// defineProps<{list:PersonList,Yenan?:string}>() //必传
// defineProps<{list?:PersonList}>() //可传可不传


// 四、接收 + 限制 + 设置默认值
//  公式 withDefaults(defineProps<{a:T}>(),{a:...})  withDefaults接收2个参数
withDefaults(defineProps<{list:PersonList,Yenan:string}>(),{
  list:()=>[{ id: 'test', name: '夜南漫剪', age: 26 }],
  Yenan:'我无敌了'
})
</script>
<style>
button {
  margin-left: 10px;
}
</style>